﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>留言</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/plugin/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="jQueryMsg/css/message.css">

    <style>
        .table td, .table th {
            padding: 0.25rem !important;
        }

        .fixed-table-container tbody td, .fixed-table-container thead th {
            padding: 0px;
        }

        .list-group-item {
            border: transparent;
        }

        #liHover li:hover {
            background-color: #f7f7f7;
            border-radius: 5px;
            border-left: 3px #007bff solid;
        }
    </style>

</head>
<body style="min-width: 555px">
<div class="wrapper">
    <div class="main-header">

        <!--logo-->
        <div class="logo-header">
            <a href="index.html" class="logo">
                教学实训管理系统
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">


                <!--用户管理-->
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="la la-bell"></i>
                            <span id="messageLen" class="notification" style="display: none"></span>
                        </a>
                        <ul id="dialogueMessage" class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">

                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="userName1"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <a id="resetPass" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> 修改密码</a>
                            <a id="logout" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> Logout</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="sidebar-wrapper">

            <!--左侧导航-->
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>home</p>
                        <!--<span class="badge badge-count">5</span>-->
                    </a>
                </li>
                <li id="1" style="display: none" class="nav-item">
                    <a href="user.html">
                        <i class="la la-table"></i>
                        <p>用户</p>
                        <!--<span class="badge badge-count">14</span>-->
                    </a>
                </li>
                <li id="2" style="display: none" class="nav-item">
                    <a href="role.html">
                        <i class="la la-keyboard-o"></i>
                        <p>角色</p>
                        <!--<span class="badge badge-count">50</span>-->
                    </a>
                </li>
                <li id="3" style="display: none" class="nav-item active">
                    <a href="questions.html">
                        <i class="la la-th"></i>
                        <p>留言</p>
                        <!--<span class="badge badge-count">6</span>-->
                    </a>
                </li>
                <li id="4" style="display: none" class="nav-item">
                    <a href="submission.html">
                        <i class="la la-bell"></i>
                        <p>日记记录</p>
                        <!--<span class="badge badge-success">3</span>-->
                    </a>
                </li>
                <li id="5" style="display: none" class="nav-item">
                    <a href="audit.html">
                        <i class="la la-font"></i>
                        <p>日记审核</p>
                        <span id="diaryLen" class="badge badge-danger"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--main-->
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">留言</h4>
                <!--界面-->
                <div class="row" style="margin-bottom: 2%">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="row">
                                <div class="col-md-3">
                                    <div style="margin: 5px;min-height: 465px;border-radius: 5px;border: 1px #ced4da solid">
                                        <div style="padding: 5px">
                                            <form class="navbar-left navbar-form nav-search mr-md-3" action=""
                                                  style="margin-right: 0rem !important;">
                                                <div class="input-group" style="border-radius: 5px">
                                                    <input id="search" type="text" placeholder="用户名称..."
                                                           class="form-control">
                                                    <div class="input-group-append">
                                                        <span class="input-group-text">
                                                            <i id="searchBtn" class="la la-search search-icon"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </form>
                                            <ul id="liHover" class="list-group"
                                                style="max-height: 400px;margin-top: 5px;overflow-y: auto">
						

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <h1 id="dialogueIsNone" style="display: block; margin: 20% 40%;">
                                        <img src="assets/img/选择.png" height="100" width="100"/>
                                    </h1>
                                    <div id="dialogueContent" class="panel panel-primary" style="display: none;">
                                            <div style="border-radius: 5px;padding: 10px;border-bottom: 1px #e8e8e8 solid">
                                            <span class="offset-10">
                                                <span id="interlocutors" style="float: right;margin-right: 5%">

                                                </span>
                                            </span>
                                            </div>
                                            <div id="con"
                                                 style="height: 300px ;overflow-y: auto;border-bottom: 1px #e8e8e8 solid">
                                                <div id="contentMain">

</div>
                                            </div>
                                            <div>
                                                <form role="form">
                                                    <div>
                                                    <textarea id="content" style="height: 100px" class="form-control"
                                                              rows="3">ccc</textarea>
                                                        <div class="offset-10">
                                                            <div style="margin: 2px">
                                                                <button onclick="saveDialogue()" type="button"
                                                                        class="btn btn-xs btn-info">发送
                                                                </button>
                                                                <button onclick="$('#content').val('')" type="button" class="btn btn-xs btn-info">清空
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                反馈
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                帮助
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    2021.07.22
                </div>
            </div>
        </footer>
    </div>
</div>
<div class="modal fade" id="deleteModel">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="deleteModalLabel">操作</h6>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                确认要删除吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="deleteBtn" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="myModalLabel">操作</h6>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="oldPass">旧密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="oldPass" placeholder="旧密码..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="newPass">新密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="newPass" placeholder="新密码..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="newPassTwo">确认密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="newPassTwo" placeholder="确认密码..." autocomplete="off">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="setPass" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<!--<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>-->
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<!--<script src="assets/js/plugin/chartist/chartist.min.js"></script>-->
<!--<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>-->
<!--<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>-->
<!--<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>-->
<!--<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>-->
<!--<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>-->
<!--<script src="assets/js/plugin/chart-circle/circles.min.js"></script>-->
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="jQueryMsg/js/message.js"></script>
<script>
    var token;
    var userBId;
    $(function () {
        token = sessionStorage.getItem('token')
        getPower()
        dialogueMessage()
        audit();
        var userName = "";
        var v = parseUrl();//解析所有参数
        if (v != 0) {
            userBId = v['userBId']
        }
        selectUser(userName)
    })

    function selectUser(userName) {
        $.ajax({
            url: 'http://localhost:8080/oa/t-user/listUserContent?userName='+userName,
            type: "GET",
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                var data = data.data
                $('#liHover').empty();
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    if (userBId == data[i].id) {
                        selectDialogue(data[i].id,data[i].userName)
                    }
                    html += '<li onclick="selectDialogue(\'' + data[i].id + '\',\'' + data[i].userName + '\')" class="list-group-item" value="' + data[i].id + '">' + data[i].userName + '</li>'
                }
                $('#liHover').append(html)
            }
        })
    }

    function selectDialogue(userId, userName) {
        $('#interlocutors').html(userName);
        userBId = userId
        $('#dialogueIsNone').attr('style', 'display: none');
        $('#dialogueContent').attr('style', 'display: block');
        selectContent();
    }

    function saveDialogue() {
        var content = $('#content').val();
        var param = {
            userBId: userBId,
            dialogueContent: content
        }
        $.ajax({
            url: 'http://localhost:8080/oa/t-dialogue/saveDialogue',
            type: "POST",
            data: JSON.stringify(param),
            dataType: "json",
            headers: {
                token: "" + token
            },
            contentType: 'application/json; charset=UTF-8',
            success: function (data) {
                if (data.code == 200) {
                    selectContent()
                    $('#content').val('');
                } else if (data.code == 401) {
                    window.location.href = 'login.html'
                } else {
                    $.message({
                        message: data.msg,
                        type: 'error'
                    });
                }
            }
        })
    }

    function selectContent() {
        $.ajax({
            url: 'http://localhost:8080/oa/t-dialogue/dialogueList',
            type: "POST",
            data: {userBId: userBId},
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                if (data.code == 200) {
                    dialogueMessage()
                    var data = data.data
                    var html = "";

                    $('#contentMain').empty();
                    for (var i = data.length - 1; i >= 0; i--) {
                        if (data[i].type == 0) {
                            html += '<div style="padding: 2%;" class="col-md-6">' +
                                '<span style="float: left;padding: 5px;border-radius: 5px;background-color: aqua">' +
                                '<li onclick="deleteContent(\'' + data[i].dialogueId + '\')" style="list-style: none;max-width: 300px" value="' + data[i].dialogueId + '">' + data[i].dialogueContent + '</li>' +
                                '</span>' +
                                '<div style="clear: both"></div>' +
                                '</div>'
                        } else {
                            html += '<div style="padding: 2%;" class="offset-6">' +
                                '<span style="float: right; padding: 5px;border-radius: 5px;background-color: coral;">' +
                                '<li style="list-style: none;max-width: 300px" value="' + data[i].dialogueId + '">' + data[i].dialogueContent + '</li>' +
                                '</span>' +
                                '<div style="clear: both"></div>' +
                                '</div>'
                        }
                    }
                    $('#contentMain').append(html)
                    $('#con').animate({scrollTop: $('#contentMain').height() + 'px'}, 200)
                } else if (data.code == 401) {
                    window.location.href = 'login.html'
                } else {
                    $.message({
                        message: data.msg,
                        type: 'error'
                    });
                }

            }
        })
    }

    function deleteContent(dialogueId) {
        $('#deleteModel').modal('show');
        $('#deleteBtn').unbind('click').on('click', function () {
            $.ajax({
                url: 'http://localhost:8080/oa/t-dialogue/deleteDialogue',
                type: "POST",
                data: {dialogueId: dialogueId},
                dataType: "json",
                headers: {
                    token: "" + token
                },
                success: function (data) {
                    if (data.code == 200) {
                        selectContent();
                        $.message(data.msg);
                        $('#deleteModel').modal('hide')
                    } else if (data.code == 401) {
                        window.location.href = 'login.html'
                    } else {
                        $.message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }
            })
        })
    }
    $("#searchBtn").unbind('click').on('click',function () {
        var keyword = $('#search').val();
        selectUser(keyword)
    })
</script>
<script src="power.js"></script>
</html>